﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('大数据可视化')"/>
    <title>大数据可视化</title>
    <script th:src="@{/js/jquery.min.js}"></script>
    <link th:href="@{/visual/css/comon0.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link rel="shortcut icon" href="../favicon.ico">
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            z-index: 9999999;
        }

    </style>
</head>
<script>
    //加载动画
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /*设置高度*/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });
</script>
<th:block th:include="include :: footer"/>
<script type="text/javascript" th:src="@{/visual/js/echarts.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/leshu/lsyl.js}"></script>
<!--<script language="JavaScript" th:src="@{/visual/js/js.js}"></script>-->
<!--<th:block th:include="include :: echarts-js"/>-->
<script language="JavaScript" src="js/js.js"></script>
<body style="overflow-x:hidden;">
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" th:src="@{/visual/js/index.html}" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"><img th:src="@{/visual/picture/loading.gif}"> 页面加载中...</div>
</div>
<div class="head">
    <h1 th:text="${@config.getKey('sys.visualization.screen.title')}"></h1>
    <!--顶部-->
    <div class="weather">
        <!--<img src="picture/weather.png">-->
        <!--<span>多云转晴</span>-->
        <span id="showTime"></span>
        <a title="全屏显示" href="javascript:void(0)" id="fullScreen" onclick="$.fullScreen.full();">
            <i class="fa fa-arrows-alt"></i>
        </a>
        <!--<a title="退出全屏显示" href="javascript:void(0)" id="exitFullScreen">-->
        <!--<i class="fa fa-arrows-alt"></i>-->
        <!--</a>-->
    </div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</div>
<!--  医废类型总数  -->
<div class="boxall_bar">
    <!--  病理性总数  -->
    <div class="boxLine">
        <!--  袋数背景  -->
        <div class="boxLine_bg">
            <span name="pathology_bag"></span>
            <span>袋</span>
        </div>
        <!--  医废、kg  -->
        <div class="boxLine_bg_right">
            <p>病理性总数</p>
            <span name="pathology_w"></span>
            <small> kg</small>
            </span>
        </div>
    </div>
    <!--  损伤性总数  -->
    <div class="boxLine">
        <!--  袋数背景  -->
        <div class="boxLine_bg">
            <span name="damage_bag"></span>
            <span>袋</span>
        </div>
        <!--  医废、kg  -->
        <div class="boxLine_bg_right">
            <p>损伤性总数</p>
            <span name="damage_w"></span>
            <small> kg</small>
        </div>
    </div>
    <!--  药物性总数  -->
    <div class="boxLine">
        <!--  袋数背景  -->
        <div class="boxLine_bg">
            <span name="drug_bag"></span>
            <span>袋</span>
        </div>
        <!--  医废、kg  -->
        <div class="boxLine_bg_right">
            <p>药物性总数</p>
            <span name="drug_w"></span>
            <small> kg</small>
        </div>
    </div>
    <!--  化学性总数  -->
    <div class="boxLine">
        <!--  袋数背景  -->
        <div class="boxLine_bg">
            <span name="chemical_bag"></span>
            <span>袋</span>
        </div>
        <!--  医废、kg  -->
        <div class="boxLine_bg_right">
            <p>化学性总数</p>
            <span name="chemical_w"></span>
            <small> kg</small>
        </div>
    </div>
    <!--  感染性总数  -->
    <div class="boxLine">
        <!--  袋数背景  -->
        <div class="boxLine_bg">
            <span name="infection_bag"></span>
            <span>袋</span>
        </div>
        <!--  医废、kg  -->
        <div class="boxLine_bg_right">
            <p>感染性总数</p>
            <span name="infection_w"></span>
            <small> kg</small>
        </div>
    </div>
    <!--  胎盘总数  -->
    <div class="boxLine tp">
        <!--  袋数背景  -->
        <div class="boxLine_bg">
            <span name="tp_bag"></span>
            <span>袋</span>
        </div>
        <!--  医废、kg  -->
        <div class="boxLine_bg_right">
            <p>胎盘总数</p>
            <span name="tp_w"></span>
            <small> kg</small>
        </div>
    </div>

    <!--    <div class="boxfoot"></div>-->
</div>

<div class="mainbox">

    <!--统计图-->
    <ul class="clearfix">
        <li>
            <div class="boxall">
                <div class="allnav" id="echart_1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="allnav" id="echart_2"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="allnav" id="echart_3"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter" id="yearTotalWeight">0</li>
                        <li class="pulll_left counter" id="yearTotalBags">0</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left" id="theYearTotalWeight">xxxx年医废总产量（kg）</li>
                        <li class="pulll_left" id="theYearTotalBag">xxxx年医废总袋数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <!--<div class="map1"><img src="picture/lbx.png"></div>-->
                <!--<div class="map2"><img src="picture/jt.png"></div>-->
                <!--<div class="map3"><img src="picture/map.png"></div>-->
                <!--<div class="map4" id="map_1"></div>-->
                <div id="allmap"></div>

            </div>
        </li>
        <li>
            <div class="boxall">    <!-- 3.4rem   -->
                <div class="allnav" id="echart_4"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">    <!-- 3rem   -->
                <div class="allnav" id="echart_5"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">    <!-- 3rem   -->
                <div class="allnav" id="echart_6"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>


</div>

<!--<div class="back"></div>-->

<!--<script type="text/javascript" th:src="@{/visual/js/china.js}"></script>-->
<!--<script type="text/javascript" th:src="@{/ajax/libs/report/echarts/area_echarts.js}"></script>-->

<script type="text/javascript" th:src="${@config.baiduKey()}"></script>
<!--<script type="text/javascript" th:src="@{/visual/js/baidu_map.js}"></script>-->
<script type="text/javascript" th:src="@{/leshu/baidu/init.v2.js}"></script>
<script type="text/javascript" th:src="@{/leshu/baidu/AreaRestriction_min.js}"></script>
<script th:inline="javascript"> var ctx = [[@{
    /}]]; </script>
<script th:inline="javascript">
    //    XiaoYi...
    var prefix = ctx + "yf/reports";

    //隐藏胎盘
    var tp = [[${@dep.hasAnyTp()}]];
    if(tp == 'hidden'){
        $(".tp").hide();
        $(".boxLine").addClass("boxLine-lg");
    }

    //获取当前角色下的 管辖区域
    var mapPoint = [[${mapPoint}]];

    //获取地图的样式id
    var styleJsonMap = [[${@config.getKey('admin.style.map')}]];
    // console.log(styleJsonMap)

    var dept = [[${@permission.getPrincipalProperty('dept')}]];
    // console.log("yonhu:L",dept.coordinates)

    var option = {
        id: 'allmap',
        //行政区域边线边框厚度
        fillOpacity: 0.9,
        //行政区域边线颜色
        strokeColor: "#020202",
        //隐藏区域颜色
        fillColor: "#3a65cb",
        //百度地图 样式id
        styleId: 'a90623b4ac9146a6e5381b6fa7c8cd3a',
        //地图POI 点击信息
        enableMapClick: false,
        // 限定展示区域
        areaRestriction: true,
        //设置地图最小级别
        minZoom: 7,
        //设置地图最大级别
        maxZoom: 18,
        //区域点击事件
        click: false,
        //添加区域标签
        centerlabel: false,
        //添加滚轮缩放
        enableScrollWheelZoom: false,
        //双击放大
        enableDoubleClickZoom: false,
        //双击放大
        enableDoubleClickZoom: false,
        showCitys: [mapPoint],
        citysList: [],
    //    当前用户机构地址
        userDeptCoordinates:dept.coordinates,
        startingPosition:dept.deptName
    };

    //定时请求数据
    // var interval3 = setInterval(function () {
    //     console.log("刷新")
    //     //获取医废类型统计
    //     getTrashType();
    //     //获取今年医废总产量、总袋数
    //     getYearYFTotalWeightAndBags();
    //     //统计图 1-6
    //     echarts_n_1();
    //     echarts_n_2();
    //     echarts_n_3();
    //     echarts_n_4();
    //     echarts_n_5();
    //     echarts_n_6();
    // }, 60 * 1000);


    $(function () {
        // 今年总袋数、总产量文字
        var date = new Date();
        $('#theYearTotalWeight').text(date.getFullYear() + '年医废总产量（kg）');
        $('#theYearTotalBag').text(date.getFullYear() + '年医废总袋数');
        //初始化地图
        baiduInit();
        //获取医废类型统计
        getTrashType();
        //获取今年医废总产量、总袋数
        getYearYFTotalWeightAndBags();
        //统计图 1-6
        echarts_n_1();
        echarts_n_2();
        echarts_n_3();
        echarts_n_4();
        echarts_n_5();
        echarts_n_6();
    });


    //初始化地图
    function baiduInit() {
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/getHospitalWeightBagPoint", null, function (res) {
            console.log(res);
            if (res.code === 0) {
                option.citysList = res.rows;
                console.log(option)
                $.baidu.init(option);
            }
        });
    }


    //获取医废类型数据
    function getTrashType() {
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/nowTypeSS", null, function (res) {
            if (res.code == 200) {
                //医废类型赋值

                $("span[name='chemical_w']").html(res.data.chemical_w)
                $("span[name='chemical_bag']").html(res.data.chemical_bag)
                $("span[name='damage_bag']").html(res.data.damage_bag)
                $("span[name='damage_w']").html(res.data.damage_w)
                $("span[name='drug_bag']").html(res.data.drug_bag)
                $("span[name='drug_w']").html(res.data.drug_w)
                $("span[name='infection_bag']").html(res.data.infection_bag)
                $("span[name='infection_w']").html(res.data.infection_w)
                $("span[name='pathology_bag']").html(res.data.pathology_bag)
                $("span[name='pathology_w']").html(res.data.pathology_w)
                $("span[name='tp_bag']").html(res.data.tp_bag)
                $("span[name='tp_w']").html(res.data.tp_w)
            } else {
                layer.msg("获取医废类型失败", {icon: '2'})
            }
        })
    }

    <!--  获取今年医废总产量、总袋数   -->
    function getYearYFTotalWeightAndBags() {
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/getYearYFTotalWeightAndBags", null, function (res) {
            if (res.code == 200) {
                // alert( res.data.yearTotalWeight + "    " + res.data.yearTotalBags );
                $("#yearTotalWeight").html(res.data.yearTotalWeight);
                $("#yearTotalBags").html(res.data.yearTotalBags);
            } else {
                layer.msg("获取医废总产量、总袋数失败", {icon: '2'})
            }
        })
    }


    <!--   左一  医废种类饼状图  -->
    function echarts_n_1() {
        var pieChart = echarts.init(document.getElementById("echart_1"));
        // let bgColor = '#00000000';
        let title = '总量';
        let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
        let echartData = [];
        let total = 0;

        let formatNumber = function (num) {
            let reg = /(?=(\B)(\d{3})+$)/g;
            return num.toFixed(2).toString().replace(reg, ',');
        }

        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/echarets/trashTypeStatistics", null, function (res) {       // "/echarets/trashType"
            if (res.code == 0) {
                echartData = res.rows
                total = formatNumber(echartData.reduce((a, b) => {
                    return a + b.value * 1
                }, 0));
                option.title[0].text = '{name|' + title + '（Kg）}\n{val|' + total + '}'
                option.series[0].data = echartData;

                pieChart.setOption(option);
                $(window).resize(pieChart.resize);
            }

        });

        var option = {
            // backgroundColor: bgColor,
            color: color,
            // tooltip: {
            //     trigger: 'item'
            // },
            title: [{
                top: 'center',
                left: '52%',
                textStyle: {
                    rich: {
                        text: {
                            fontSize: 12,           // 总量（Kg）
                            fontWeight: 'bold',
                            color: '#238749',
                        },
                        name: {
                            fontSize: 12,           // 总量（Kg）
                            fontWeight: 'bold',
                            color: '#238749',
                            padding: [10, 10]
                        },
                        val: {
                            fontSize: 13,           // 总量 -- 具体kg
                            fontWeight: 'bold',
                            color: '#238749',
                            padding: [10, 10]
                        }
                    }
                }
            }, {
                text: '医废种类饼状图',
                top: 10,
                right: '10%',
                textStyle: {
                    fontSize: 15,
                    color: '#fff',
                }
            }
            ],
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} kg ({d}%)"  // 鼠标滑上显示框   {a} <br/>{b} : {c}  ({d}%)
            },
            legend: {          // 列表说明
                orient: 'vertical',
                icon: 'rect',
                top: 5,
                left: 5,

                // x: '80%',
                // y: 'center',
                itemWidth: 12,
                itemHeight: 12,
                align: 'left',
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 12,
                            color: '#2F89CF'
                        },
                        value: {
                            fontSize: 14,
                            padding: [0, 5, 0, 5],
                            color: '#238749'
                        },
                        unit: {
                            fontSize: 12,
                            color: '#238749'
                        }
                    }
                }

                ,
                formatter: function (name) {
                    let res = echartData.filter(v => v.name == name);
                    res = res[0] || {};
                    let unit = res.unit || 'Kg';
                    return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
                }
                // data: legendName
            }
            ,
            series: [{          // 指示线
                type: 'pie',
                radius: ['45%', '60%'],
                center: ['60%', '50%'],
                data: [],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        // borderColor: bgColor,
                        borderWidth: 2
                    }
                },
                labelLine: {
                    normal: {
                        show: false,
                        length: 20,
                        length2: 120,
                        lineStyle: {
                            color: '#e6e6e6'
                        }
                    }
                },
                label: {
                    normal: {
                        show: false,
                        formatter: params => {
                            return (
                                '{icon|●}{name|' + params.name + '}{value|' +
                                formatNumber(params.value) + '} {unit|Kg }' + params.percent + '%'
                            );
                        },
                        padding: [0, -120, 25, -100],
                        rich: {
                            icon: {
                                fontSize: 16
                            },
                            name: {
                                fontSize: 14,       // 医废类型
                                padding: [0, 10, 0, 4],
                                fontWeight: 'bold',
                                color: '#2F89CF'
                            },
                            value: {
                                fontSize: 16,       // 数值
                                fontWeight: 'bold',
                                color: '#238749'
                            },
                            unit: {
                                fontSize: 16,       // kg
                                fontWeight: 'bold',
                                color: '#238749'
                            }
                        }
                    }
                },
            }]
        };

    }

    //统计图统一样式
    var grid = {
        left: '2%',
        right: '5%',
        bottom: '1%',
        top: '20%',
        containLabel: true
    }

    <!--   左二  积存量变化趋势图  -->
    function echarts_n_2() {

        var axisChart = echarts.init(document.getElementById("echart_2"));
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/echarets/storageAxisList", {}, function (res) {
                if (res.code == 0) {
                    var echartData = res.rows;

                    var option = {
                            title: {
                                text: '周积存量变化趋势图',
                                top: 10,
                                right: '10%',
                                textStyle: {
                                    fontSize: 15,
                                    color: '#fff'
                                }
                            },
                            tooltip: {
                                formatter: '{b}日  </br>● {c} kg',
                            },
                            trigger: 'axis',
                            legend: {
                                data: ['积存量（kg）'],
                                top: 10,
                                left: '10%',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            grid: $.extend(grid, {}),
                            // toolbox: {
                            //     feature: {
                            //         saveAsImage: {}
                            //     }
                            // },
                            xAxis: {
                                type: 'category',
                                boundaryGap: true,
                                data: echartData.map(x => {
                                        return x.statisticsDate + ""
                                    }
                                ),
                                axisLine: {     // 标尺 横向
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                                ,
                                axisLine: {     //标尺 横向
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                }
                            }
                            ,
                            series: [
                                {
                                    name: '积存量（kg）',
                                    type: 'line',
                                    color: '#1CCED1',
                                    label: {
                                        normal: {
                                            show: true,
                                            color: '#1CCED1'
                                        }
                                    },
                                    data: echartData
                                }
                                // ,
                                // {
                                //     name: '预警值（kg）',
                                //     type: 'line',
                                //     label: {
                                //         normal: {
                                //             show: true,
                                //             color: '#fff'
                                //         },
                                //     },
                                //     data: echartData
                                // },
                                // {
                                //     name: '平均值（kg）',
                                //     type: 'line',
                                //     data: echartData,
                                //     markLine: {
                                //         data: [
                                //             {
                                //                 type: 'average', name: '平均值', symbol: 'circle',
                                //                 label: {
                                //                     normal: {
                                //                         position: 'end',
                                //                         color: '#fff',
                                //                         formatter: ''
                                //                     }
                                //                 }
                                //             }
                                //         ]
                                //     }
                                // }
                            ]
                        }
                    ;

                    axisChart.setOption(option);
                    $(window).resize(axisChart.resize);
                }

            }
        )
        ;

    }


    <!--   左三  医院医废统计总量排行  -->
    function echarts_n_3() {

        var echarts3 = echarts.init(document.getElementById("echart_3"));
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/echarets/hospitalYFStatisticsList", {}, function (res) {
            if (res.code == 0) {
                var chartData = res.rows;

                // var chartData = [
                //     {id: 001, name: '小王', value: 3100},
                //     {id: 002, name: '小李', value: 2100},
                //     {id: 003, name: '小赵', value: 1218},
                //     {id: 004, name: '小马', value: 581},
                //     {id: 005, name: '小刘', value: 431},
                //     {id: 006, name: '小张', value: 383}
                // ];

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b} </br> 总产量： {c} kg',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['总产量'],
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: $.extend(grid, {}),
                    title: {
                        text: '医院医废累计总量统计排行',
                        top: 10,
                        right: '10%',
                        textStyle: {
                            fontSize: 15,
                            color: '#fff'
                        }
                    },
                    xAxis: {
                        type: 'value',
                        color: '#fff',
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {     //标尺 横向
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: chartData.map(y => {
                            return y.name
                        }),
                        splitLine: {show: false},
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {     //标尺 横向
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        offset: 3,
                        nameTextStyle: {
                            fontSize: 10
                        }
                    },
                    series: [
                        {
                            name: '医废总产量(kg)',
                            type: 'bar',
                            data: chartData.map(x => {
                                return x.value
                            }),
                            barWidth: 8,
                            barGap: 8,
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    offset: [5, -2],
                                    textStyle: {
                                        color: '#F68300',
                                        fontSize: 12
                                    }
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7
                                },
                                normal: {
                                    barBorderRadius: 7,
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [
                                            {offset: 0, color: '#3977E6'},
                                            {offset: 1, color: '#37BBF8'}

                                        ]
                                    )
                                }
                            }
                        }
                    ]
                };

                echarts3.setOption(option);
                $(window).resize(echarts3.resize);

            }

        });

    }


    <!--   右二  存积量预警条形统计  -->
    var barChart4 = echarts.init(document.getElementById("echart_5"));
    var sid4 = '';

    function echarts_n_4() {

        InitializebBarChart_4(sid4);

        barChart4.on('click', function (params) {
            if (params.seriesType == 'bar') {
                // 查询 -- 只查询到区县
                if ((params.data.disId + "").length < 8) {
                    InitializebBarChart_4(params.data.disId);

                    // 联动 医疗机构数量统计图
                    InitializebBarChart_5(params.data.disId);
                }
            }
        });

    }

    function InitializebBarChart_4(sid4) {
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/echarets/storageBarList", {
            disId: sid4,
            limit:10,
            limit2:5
        }, function (res) {
            if (res.code == 0) {
                var chartData = res.rows;

                var option = {
                    // backgroundColor: '#000000',
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (val) {
                            let color = '';
                            if ((val[0].axisValue == 'E' || val[0].axisValue == 'G') && val[0].value > threshold[val[0].dataIndex]) {
                                color = '#FCE149';
                            } else {
                                color = '#37C611';
                            }
                            return `${val[0].name}<br/>
										<span style='color:#3AB6EB;'>   ● </span>${val[1].seriesName}: ${val[0].data.warning}kg<br/>
                                        <span style=color:${color};'>   ● </span>${val[0].seriesName}: ${val[0].data.value}kg`

                        },
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: false,
                                fontSize: 11,
                                backgroundColor: '#ccc'
                            }
                        }
                    },
                    legend: {
                        data: ['总积存量', '预警值'],
                        top: '3%',
                        right: '10%',
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    toolbox: {
                        show: true,
                        top: '2%',
                        left: 1,
                        feature: {
                            myTool1: {//my开头
                                show: true,
                                title: '返回',
                                icon: 'M425.640718 363.245708l0-170.978945-299.323927 299.251272 299.323927 299.378162 0-175.361761c213.758218 0 363.447299 68.396695 470.302872 218.076566C853.226739 619.799572 724.955435 406.087403 425.640718 363.245708',
                                iconStyle: {
                                    borderColor: '#2b76be'
                                },
                                onclick: function () {
                                    // echarts_n_4();
                                    backinit_4();
                                }
                            },
                        }
                    },
                    title: [{
                        text: '积存量预警值统计排名',
                        top: '3%',
                        left: '5%',
                        textStyle: {
                            fontSize: 15,
                            color: '#fff'
                        }
                    }],
                    xAxis: {
                        data: chartData.map(x => {
                            if (x.name.length > 5) {
                                return x.name.substring(0, 5) + "...";
                            } else {
                                return x.name;
                            }
                        }),
                        axisLabel: {					//---坐标轴 标签
                            interval: 0    // 0：表示全部显示不间隔
                        },
                        axisLine: {     //标尺 横向
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    grid: $.extend(grid, {}),
                    yAxis: {
                        splitLine: {show: false},
                        axisLabel: {
                            // formatter: '{value}Kg'
                        },
                        axisLine: {//标尺 竖向
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    series: [
                        {   // 条形图
                            name: '总积存量',
                            type: 'bar',
                            barWidth: 15,
//                            label: {
//                                normal: {
//                                    show: true,
//                                    position: 'top',
//                                    fontSize: 11,
//                                    color: '#3AC712',
//                                    formatter: (val) = > {
//                                    return `${val.value}`;
//                                         }
//                                }
//                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,//渐变
                                    label: {
                                        show: true,		//开启显示
                                        position: 'top',	//在上方显示
                                        textStyle: {	    //数值样式
                                            color: '#14c8d4',
                                            fontSize: 12
                                        }
                                    },
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#14c8d4'},
                                            {offset: 1, color: '#43eec6'}
                                        ]
                                    )
                                }
                            },
                            data: chartData
                        },
                        {   // 散点图
                            name: '预警值',
                            type: 'scatter',
                            smooth: true,
                            showAllSymbol: true,
                            symbol: 'emptyCircle',
                            symbolSize: 13,
                            itemStyle: {
                                normal: {
                                    label: {               // 柱顶数字
                                        show: true,		// 开启显示
                                        position: 'top',	// 在上方显示
                                        textStyle: {	    // 数值样式
                                            color: '#fff',
                                            fontSize: 12
                                        }
                                    }
                                }
                            },
                            data: chartData.map(x => {
                                return x.warning
                            }),
                            markLine: {silent: false}
                        },
                        // {
                        //     name: 'line',
                        //     type: 'bar',
                        //     barGap: '-100%',
                        //     barWidth: 10,
                        //     itemStyle: {
                        //         normal: {
                        //             color: new echarts.graphic.LinearGradient(
                        //                 0, 0, 0, 1,
                        //                 [
                        //                     {offset: 0, color: 'rgba(20,200,212,0.5)'},
                        //                     {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                        //                     {offset: 1, color: 'rgba(20,200,212,0)'}
                        //                 ]
                        //             )
                        //         }
                        //     },
                        //     z: -12,
                        //     data: lineData
                        // },
                        // {
                        //     name: 'dotted',
                        //     type: 'pictorialBar',
                        //     symbol: 'rect',
                        //     itemStyle: {
                        //         normal: {
                        //             color: '#0f375f'
                        //         }
                        //     },
                        //     symbolRepeat: true,
                        //     symbolSize: [12, 4],
                        //     symbolMargin: 1,
                        //     z: -10,
                        //     data: lineData
                        // }

                    ]
                };

                barChart4.setOption(option);
                $(window).resize(barChart4.resize);
            }

        });

    }

    // 重置 存积量预警条形统计
    function backinit_4() {
        sid4 = '';
        InitializebBarChart_4(sid4);

        // 联动 重置医疗机构数量统计图
        sid5 = '';
        InitializebBarChart_5(sid5);

    }


    <!--   右一  医疗机构数量统计图  -->
    var barChart5 = echarts.init(document.getElementById("echart_4"));
    var sid5 = '';

    function echarts_n_5() {
        InitializebBarChart_5(sid5);

        barChart5.on('click', function (params) {
            if (params.seriesType == 'bar') {
                // 查询 -- 只查询到区县
                if ((params.data.disId + "").length < 8) {
                    InitializebBarChart_5(params.data.disId);

                    // 联动 积存量预警值排名
                    InitializebBarChart_4(params.data.disId);
                }
            }
        });

    }

    function InitializebBarChart_5(sid5) {
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/echarets/hospitalNumBarList", {
                disId: sid5,
                limit:10
            }, function (res) {
                if (res.code == 0) {
                    var chartData = res.rows;

                    // var chartData = [
                    //     {name: '长安区', value: 22, disId: 1301},
                    //     {name: '裕华区', value: 12, disId: 1301},
                    //     {name: '新华区', value: 23, disId: 1301},
                    //     {name: '高新区', value: 25, disId: 1301},
                    //     {name: '正定县', value: 21, disId: 1301},
                    //     {name: '藁城县', value: 9, disId: 1301},
                    //     {name: '平山', value: 15, disId: 1301},
                    //     {name: '无极', value: 35, disId: 1301},
                    //     {name: '栾城', value: 56, disId: 1301}
                    // ];

                    var option = {
                        // backgroundColor: '#000000',
                        // title: {
                        //     text: '',
                        //     top: '3%',
                        //     left: '3%',
                        //     textStyle: {
                        //         fontSize: 15,
                        //         color: '#fff'
                        //     },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                label: {
                                    show: false,
                                    fontSize: 11,
                                    backgroundColor: '#ccc'
                                }
                            }
                        },
                        toolbox: {
                            show: true,
                            left: 1,
                            top: '2%',
                            feature: {
                                myTool1: {//my开头
                                    show: true,
                                    title: '返回',
                                    icon: 'M425.640718 363.245708l0-170.978945-299.323927 299.251272 299.323927 299.378162 0-175.361761c213.758218 0 363.447299 68.396695 470.302872 218.076566C853.226739 619.799572 724.955435 406.087403 425.640718 363.245708',
                                    iconStyle: {
                                        borderColor: '#2b76be'
                                    },
                                    onclick: function () {
                                        // echarts_n_5();
                                        backinit_5();
                                    }
                                },
                            }
                        },
                        legend: {
                            top: '3%',
                            right: '10%',
                            data: ['医疗机构数量'],
                            textStyle: {
                                color: '#ccc'
                            }
                        },
                        xAxis: {
                            data: chartData.map(x => {
                                return x.name
                            }),
                            axisLabel: {					//---坐标轴 标签
                                interval: 0    // 0：表示全部显示不间隔
                            },
                            axisLine: {     //标尺 横向
                                lineStyle: {
                                    color: '#fff'
                                }
                            }
                        },//医疗机构数量统计图
                        title: {
                            text: '医疗机构数量统计图',
                            top: '3%',
                            left: '5%',
                            textStyle: {
                                fontSize: 15,
                                color: '#fff'
                            }
                        },
                        grid: $.extend(grid, {}),
                        yAxis: {
                            splitLine: {show: false},
                            axisLabel: {
                                formatter: '{value}个'
                            },
                            axisLine: {//标尺 竖向
                                lineStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        series: [
                            {   // 条形图
                                name: '医疗机构数量',
                                type: 'bar',
                                barWidth: 15,
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 5,    // 渐变
                                        label: {         // 柱顶部显示数字
                                            show: true,		//开启显示
                                            position: 'top',	//在上方显示
                                            textStyle: {	    //数值样式
                                                color: '#fff',
                                                fontSize: 12
                                            }
                                        },
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#14c8d4'},
                                                {offset: 1, color: '#43eec6'}
                                            ]
                                        )
                                    }
                                },
                                data: chartData
                            },
                            // {
                            //     name: 'line',
                            //     type: 'bar',
                            //     barGap: '-100%',
                            //     barWidth: 10,
                            //     itemStyle: {
                            //         normal: {
                            //             color: new echarts.graphic.LinearGradient(
                            //                 0, 0, 0, 1,
                            //                 [
                            //                     {offset: 0, color: 'rgba(20,200,212,0.5)'},
                            //                     {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                            //                     {offset: 1, color: 'rgba(20,200,212,0)'}
                            //                 ]
                            //             )
                            //         }
                            //     },
                            //     z: -12,
                            //     data: lineData
                            // },
                            // {
                            //     name: 'dotted',
                            //     type: 'pictorialBar',
                            //     symbol: 'rect',
                            //     itemStyle: {
                            //         normal: {
                            //             color: '#0f375f'
                            //         }
                            //     },
                            //     symbolRepeat: true,
                            //     symbolSize: [12, 4],
                            //     symbolMargin: 1,
                            //     z: -10,
                            //     data: lineData
                            // }
                        ]
                    };

                    barChart5.setOption(option);
                    $(window).resize(barChart5.resize);
                }

            }
        );

    }

    // 重置 医疗机构数量统计图
    function backinit_5() {
        sid5 = '';
        InitializebBarChart_5(sid5);

        // 联动 重置存积量预警条形统计
        sid4 = '';
        InitializebBarChart_4(sid4);
    }

    <!--   右三  医疗机构异常统计图  -->
    function echarts_n_6() {
        var echarts6 = echarts.init(document.getElementById("echart_6"));
        $.ajaxSettings.async = true;    // 异步请求
        $.post(prefix + "/echarets/hospitalExceptionNum", {}, function (res) {
            if (res.code == 0) {
                var seriesData = res.rows;
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c}  ({d}%)"  // 鼠标滑上显示框   {a} <br/>{b} : {c}  ({d}%)
                    },
                    title: {
                        text: '医疗机构异常数量统计',
                        top: '3%',
                        left: '3%',
                        textStyle: {
                            fontSize: 15,
                            color: '#fff'
                        }
                    },
                    legend: {
                        show: true,
                        top: '3%',
                        right: '10%',
                        orient: 'horizontal',
                        // left : 120,
                        data: seriesData.map(c => {
                            return c.name
                        }),
                        textStyle: {
                            color: 'white'
                        }
                    },
                    //设置饼状图每个颜色块的颜色
                    color: ['#E62346', '#37BBF8'],
                    series: [{
                        name: '颜色',
                        type: 'pie',
                        radius: '60%',
                        center: ['45%', '55%'],
                        label: {
                            normal: {
                                //饼形图显示格式
                                formatter: '{b|{b}：}{c|{c}个}  {per|{d}%}',
                                rich: {
                                    b: {
                                        color: 'white',
                                        fontSize: 14,
                                        lineHeight: 33
                                    },
                                    c: {
                                        color: 'white',
                                        fontSize: 14,
                                        lineHeight: 33
                                    },
                                    //设置百分比数字颜色
                                    per: {
                                        color: '#00B4FB',
                                        fontSize: 14,
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data: seriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };

                echarts6.setOption(option);
                $(window).resize(echarts6.resize);
            }
        });


        // 医疗机构异常数量统计 -- 点击事件
        echarts6.on('click', function (params) {
            if(params.dataIndex == 0){
                // 跳转到
                var url = ctx + 'yf/warning/hospitalWarn';
                $.modal.openTab("异常记录报警", url);
            }
        });

    }

</script>

</body>
</html>